<!DOCTYPE html>
<html>

<head>
	<title></title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../../element-ui-2.13.0/lib/theme-chalk/index.css" />
	<script type="text/javascript" src="../../vue/vue-v2.6.10.js"></script>
	<script type="text/javascript" src="../../element-ui-2.13.0/lib/index.js"></script>
	<script type="text/javascript" src="../../vue/axios-0.18.0.js"></script>
</head>

<body>
	<div id="app">
		<!--上传课程-->
		<el-tag type="info" effect="dark" closable="true" :disable-transitions="disable" @close="handleClose">添加课程
		</el-tag>
		<div v-if="inputVisible">
			<!--表单-->
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="课程名称" prop="courseName">
					<el-input v-model="ruleForm.courseName" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="课程简介" prop="descs">
					<el-input v-model="ruleForm.descs" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="课程类型" prop="courseType">
					<el-select v-model="ruleForm.courseType" placeholder="请选择课程类型">
						<el-option label="JavaEE" value="1"></el-option>
						<el-option label="数据库" value="2"></el-option>
						<el-option label="前端技术" value="3"></el-option>
					</el-select>
				</el-form-item>

				<el-upload style="margin-left: 25px;" :on-remove="handleRemoveImg" :on-exceed="handleExceedImg"
					:http-request="myUpload" class="upload-demo" ref="upload1"
					action="http://localhost:8080/education_war_exploded/course?method=uploadFile" :limit="1"
					:auto-upload="false">
					<el-button slot="trigger" size="small" type="primary">选取图片</el-button>
					<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload(`upload1`)">
						上传到服务器</el-button>
				</el-upload>
				<img :src="dialogImageUrl|showImg" style="width: 100px;height: 100px;margin-left: 25px;" alt="" />

				<el-upload style="margin-left: 25px;" :on-remove="handleRemoveVideo" :on-exceed="handleExceedVideo"
					:http-request="myUpload" class="upload-demo" ref="upload2"
					action="http://localhost:8080/education_war_exploded/course?method=uploadFile" :limit="1"
					:auto-upload="false">
					<el-button slot="trigger" size="small" type="primary">选取视频</el-button>
					<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload(`upload2`)">
						上传到服务器</el-button>
				</el-upload>

				<video controls autoplay muted="muted"
					style="width: 100px;height: 100px;margin-left: 25px;margin-top: 5px;"
					:src="dialogVedioUrl|showVideo"></video>

				<el-form-item label="课程价格" prop="coursePrice">
					<el-input v-model="ruleForm.coursePrice" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="ruleForm.status">
						<el-radio label="0">未上架</el-radio>
						<el-radio label="1">上架</el-radio>
						<el-radio label="2">下架</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" style="margin-left: 20px;">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</div>
		</div>
		<!--结尾-->
	</div>
</body>
<script>
	axios.defaults.withCredentials = true
	new Vue({
		el: "#app",
		data: {
			/*校验的字段*/
			ruleForm: {
				courseName: '',
				descs: '',
				courseType: '',
				coursePrice: '',
				status: ''
			},
			/*规则*/
			rules: {
				courseName: [{
					required: true,
					message: '请输入课程名称',
					trigger: 'blur'
				},],
				descs: [{
					required: true,
					message: '请选择课程简介',
					trigger: 'blur'
				}],
				courseType: [{
					required: true,
					message: '请选择课程类型',
					trigger: 'change'
				}],
				coursePrice: [{
					required: true,
					message: '请输入课程价格',
					trigger: 'blur'
				}],
				status: [{
					required: true,
					message: '请至少选择一个状态',
					trigger: 'change'

				}]
			},
			/*文件上传*/
			dialogImageUrl: '',
			dialogVedioUrl: '',
			/*选项卡*/
			inputVisible: true,
			disable: false,
		},
		methods: {

			handleClose() {
				this.inputVisible = false;
        		this.$message.info("添加课程信息已隐藏");
			},

			handleExceedImg(files, fileList) {
				this.$message.warning(`抱歉，只能上传${fileList.length}张图片`);
			},

			handleExceedVideo(files, fileList){
				this.$message.warning(`抱歉，只能上传${fileList.length}一个视频`);
			},
			submitUpload(value) {
				this.$refs[value].submit();
			},

			handleRemoveImg() {
				let fileName = this.dialogImageUrl;
				this.dialogImageUrl = '';
				axios.post(`http://localhost:8080/education_war_exploded/course?method=removeFile&fileName=${fileName}`).then(response => {
					if (response.data.code == 200) {
						this.$message.success(response.data.message);
					} else {
						this.$message.warning(response.data.message);
					}
				});
			},

			handleRemoveVideo() {
				let fileName = this.dialogVedioUrl;
				this.dialogVedioUrl ='';
				axios.post('http://localhost:8080/education_war_exploded/course?method=removeFile&fileName=' + fileName).then(response => {
					if (response.data.code == 200) {
						this.$message.success(response.data.message);
					} else {
						this.$message.warning(response.data.message);
					}
				});
			},

			myUpload(content) {
				let params = new FormData();
				params.append("file", content.file);
				axios.post(content.action, params).then(response => {
					if (response.data.code == 201) {
						this.dialogImageUrl = response.data.data;
					}
					if (response.data.code == 202) {
						this.dialogVedioUrl = response.data.data;
					}
					if (response.data.code == 500) {
						this.$message.warning(response.data.message);
					}
				});
			},

			submitForm(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						let params = new URLSearchParams();
						for (let i in this.ruleForm) {
							params.append(i, this.ruleForm[i]);
						}
						params.append("courseImage", this.dialogImageUrl);
						params.append("courseVideo", this.dialogVedioUrl);
						axios.post('http://localhost:8080/education_war_exploded/course?method=addCourse', params).then(response => {
							if (response.data.code == 200) {
								this.$message.success(response.data.message);
							} else {
								this.$message.warning(response.data.message);
							}
							setTimeout(() => {
								location.href = "index.html";
							}, 1000)
						});
					} else {
						this.$message.warning("验证未通过");
					}
				});
			}

		},
		filters: {
			showImg(src) {
				return 'http://localhost:8080/upload/' + src;
			},
			showVideo(src) {
				return 'http://localhost:8080/upload/' + src;
			}
		}
	})
</script>

</html>